<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
        <el-form-item>
          <el-input type="text" v-model="formInline.keyword" placeholder="关键字" @keyup.enter.native="queryManage"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="queryManage">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="AddManage">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- 用户列表 -->
    <template>
      <el-table :data="tableData" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="userName" label="用户名称" sortable></el-table-column>
        <el-table-column prop="name" label="联系人姓名" sortable></el-table-column>
        <el-table-column prop="phone" label="手机号" sortable></el-table-column>
        <el-table-column prop="email" label="邮箱" sortable></el-table-column>
        <el-table-column prop="CreateTimeThe" label="用户创建时间" sortable></el-table-column>
        <el-table-column inline-template label="用户状态">
          <span>
            <el-switch v-model=row.type @change="stopstartButtion(row)" on-text="启用" off-text="停用" on-color="#13ce66" off-color="#ff4949"></el-switch>
          </span>
        </el-table-column>
        <el-table-column inline-template :context="_self" label="操作" width="250">
          <span>
            <el-button type="text" size="small" @click="EditManage(row)">编辑</el-button>
            <el-button type="text" size="small" @click="EditRole(row)">角色</el-button>
            <el-button type="text" size="small" @click="DelManage(row)">删除</el-button>
          </span>
        </el-table-column>
      </el-table>
    </template>
    <!--分页-->
    <!-- <el-col :span="24" class="toolbar" style="padding-bottom:10px;">
      <el-pagination :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right">
      </el-pagination>
    </el-col> -->
    <!--编辑界面-->
    <el-dialog :title="editFormTitle" v-model="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
        <el-form-item label="用户名称" prop="userName">
          <el-input auto-complete="off" :disabled="editForm.userNameDisabled" v-model="editForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="name">
          <el-input auto-complete="off" v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input auto-complete="off" v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="用户手机号" prop="phone">
          <el-input auto-complete="off" v-model.number="editForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">{{btnEditText}}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="editFormTitle" v-model="editRoleFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="100px" :rules="editRoleFormRules" ref="editRoleForm">
        <el-form-item label="角色" prop="roles">
          <el-select v-model="editForm.roles" multiple placeholder="请选择">
            <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.rId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editRoleFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="editRole" :loading="editLoading">{{btnEditText}}</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import * as UserRules from './UserRules'
import {
  Type
} from "lib"
import {
  mapGetters
} from 'vuex'
import {
  mapActions
} from 'vuex'


export default {
  computed: {
    ...mapGetters({
      roles: Type.ROLE_GET_LIST,
      btnEditText: Type.ROLE_GET_btnEditText
    })
  },
  data() {
    return {
      formInline: {
        keyword: ''
      },
      editFormVisible: false, //编辑界面显是否显示
      editFormTitle: '编辑', //编辑界面标题
      //编辑界面数据
      editForm: {
        uId: 0,
        userName: '',
        name: '',
        phone: '',
        email: '',
        userNameDisabled: false,
        roles: []
      },
      editLoading: false,
//      btnEditText: '提 交',
      editFormRules: UserRules.editFormRules,
      editRoleFormRules: UserRules.editRoleFormRules,
      tableData: [],
      listLoading: false,
      editRoleFormVisible: false, //编辑角色界面是否显示

    }
  },
  created() {
    this.$store.dispatch(Type.USER_LIST, this)
    this.$store.dispatch(Type.ROLE_LIST, this)
  },
  methods: {
    // 条件查询列表
    queryManage() {
      this.$store.dispatch(Type.USER_LIST, this)
    },
    // 停用启用逻辑
    stopstartButtion: function(row) {
      this.$store.dispatch(Type.USER_UPDATE_TYPE, {
        _this: this,
        type: row.type,
        ouId: row.uId
      })
    },
    // 删除记录
    DelManage: function(row) {
      this.$confirm('确认删除该记录吗?', '提示', {}).then(() => {
        this.$store.dispatch(Type.USER_DEL, {
          _this: this,
          ouId: row.uId
        })
      });
    },
    //编辑 or 新增
    editSubmit: function() {
      var _this = this;

      _this.$refs.editForm.validate((valid) => {
        if (valid) {
          _this.$confirm('确认提交吗？', '提示', {}).then(() => {
            _this.editLoading = true;
            _this.btnEditText = '提交中';
            if (_this.editForm.uId == 0) {
              this.$store.dispatch(Type.USER_ADD, this)
            } else {
              this.$store.dispatch(Type.USER_UPDATE, this)
            }
          });
        }
      });
    },
    editRole() {
      var _this = this;
      _this.$refs.editRoleForm.validate((valid) => {
        if (valid) {
          _this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.$store.dispatch(Type.USER_UPDATE_ROLE, this)
          });
        }
      });
    },
    //显示编辑界面
    EditManage: function(row) {
      // 清理异常提示
      if (this.$refs['editForm']) {
        this.$refs['editForm'].resetFields();
      }
      // 显示页面
      this.editFormVisible = true;
      this.editFormTitle = '编辑用户';
      this.editForm.userNameDisabled = true;
      // 默认初始数据
      this.editForm.uId = row.uId;
      this.editForm.userName = row.userName;
      this.editForm.name = row.name;
      this.editForm.phone = row.phone;
      this.editForm.email = row.email;
    },
    //显示新增界面
    AddManage: function() {
      // 清理异常提示
      if (this.$refs['editForm']) {
        this.$refs['editForm'].resetFields();
      }
      // 显示页面
      this.editFormVisible = true;
      this.editFormTitle = '新增用户';
      this.editForm.userNameDisabled = false;
      // 默认初始数据
      this.editForm.uId = 0;
      this.editForm.name = '';
      this.editForm.userName = '';
      this.editForm.phone = '';
      this.editForm.email = '';
    },
    //显示编辑界面
    EditRole(row) {
      this.$store.commit(Type.LOGIN_SET_btnEditText,"ttttt")
      // 清理异常提示
      if (this.$refs['editRoleForm']) {
        this.$refs['editRoleForm'].resetFields();
      }
      // 显示页面
      this.editRoleFormVisible = true;
      this.editFormTitle = '分配角色';
      // 默认初始数据
      this.editForm.uId = row.uId;
      this.editForm.roles = row.role
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
  }
}
</script>
<style scoped>
@import "User.css";
</style>
